<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客主页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">

</head>
<body>
<!-- 导航栏 -->
<div class="nav">

    <!-- <img src="image/img1.jpg" alt="加载失败" > -->
    <img src="image/img1.jpg" alt="图片加载失败">
    <span class="title">筱的博客</span>

    <a href="blog_lists.html">博客广场</a>
    <a href="blog_collect.html">我的收藏</a>
    <!-- 此标签用于占位 分隔 -->
    <div class="spacer"></div>

    <!-- 浏览页有写博客和注销 -->
    <a href="blog_drafts.html">草稿箱</a>
    <a href="blog_edit.html">写博客</a>
    <!-- 跳转到对应后台 实现删除 会话里的值 -->
    <!--    <a href="user/logout">注销</a>-->
    <!--    单击执行 logout方法-->
    <a href="javascript:logout()">注销</a>
</div>

<!-- 页面主体 -->
<div class="container">
    <!-- 左侧信息 其他页面可以复用-->
    <div class="container-left">

        <!-- .card 盒子 表示用户信息 -->
        <div class="card">
            <img src="" alt="">
            <!-- <h3>筱</h3> -->
            <!-- 根据用户 设定用户名 -->
            <h3></h3>


            <div class="counter">
                <span>文章数</span>
                <span>获赞数</span>
            </div>

            <div class="counter">
                <!-- <span>2</span> -->
                <span class="count"> </span>
                <span class="likecount"></span>

            </div>


        </div>
        <div class="option">
            <button class="password">修改信息</button>
        </div>

    </div>


    <div class="container-right">
        <!-- 博客指示信息 -->
        <div class="message">
<!--            欢迎进入筱的博客~, 左上角的博客广场可以查看所有用户博客-->
<!--            右上角的写博客可以编写新博客,快来写下您的第一篇博客吧~-->
            欢迎进入筱的博客~,单击写博客按钮,筱期待你留下的痕迹,快来发布你的第一篇博文吧~

        </div>

    </div>
    <!-- 引入jquery源码 -->
    <script src="js/jquery.js"></script>
    <!-- 向后端发起请求获取全部博文josn对象 -->
    <script>
        // 此处获取个人的博客
        function getBlogs() {

            let rel = 1;
            let bodydiv = document.querySelector('.container-right');
            let mes = document.querySelector('.message');
            $.ajax({
                type: 'post',
                url: '/article/showuserarticles',
                data: {"state":1},
                success: function (body) {
                    // data里是json数组对象接受的是ajax解析的服务器发送过来的josn数组字符串
                    if (body != null && body.code == 200) {

                        for (let blog of body.data) {
                            // 采取document 动态创建元素 向内部填充数据 再填充到 博文容器 渲染到页面上
                            //也可以采取 字符串拼接形式 拼接 div 等元素将内容填充 最后使用jquery方式 使博文容器内填充 字符串转换的html内容
                            // 创建一个blog 盒子 应用设置好的blog类标签
                            let blogDiv = document.createElement('div');
                            blogDiv.className = 'blog';

                            //创建 标题对象
                            let titleDiv = document.createElement('div');
                            titleDiv.className = 'title';
                            titleDiv.innerHTML = blog.title;
                            blogDiv.appendChild(titleDiv);

                            //创建日期对象
                            let dateDiv = document.createElement('div');
                            dateDiv.className = 'date';
                            dateDiv.innerHTML = blog.updatetime;

                            blogDiv.appendChild(dateDiv);

                            let desc = document.createElement('div');
                            desc.className = 'msg';



                            blogDiv.appendChild(desc);
                            let rcountDiv = document.createElement('span');
                            rcountDiv.className = 'rcount';
                            rcountDiv.innerHTML = "阅读量: " + blog.rcount;
                            desc.appendChild(rcountDiv);

                            let likedDiv = document.createElement('span');
                            likedDiv.className = 'likedcount';
                            likedDiv.innerHTML = "获赞数:" + blog.likedcount;
                            desc.appendChild(likedDiv);

                            let collection = document.createElement('span');
                            collection.className='collected';
                            collection.innerHTML="收藏数: "+blog.collection_count;
                            desc.appendChild(collection);
                            // 评论
                            let commentcount=document.createElement('span');
                            commentcount.className='commentcount';
                            commentcount.innerHTML="评论数: "+blog.commentcount;
                            desc.appendChild(commentcount);
                            //创建 正文 对象
                            let descDiv = document.createElement('div');
                            descDiv.className = 'desc';
                            descDiv.innerHTML = blog.description;

                            let  description = document.createElement('div');
                            description.appendChild(descDiv)
                            description.className='description';
                            blogDiv.appendChild(description);
                            //创建 超链接作
                            let a = document.createElement('a');
                            //  访问详情页时带上当前博文标签
                            a.href = "blog_detail.html?id=" + blog.id;
                            a.innerHTML = '查看全文&gt;&gt;';
                            blogDiv.appendChild(a);

                            // 将构造好的博客 添加到 博客容器里
                            let blogContainer = document.querySelector('.container-right');
                            blogContainer.appendChild(blogDiv);

                            // 当发布博客之后将指示信息删除
                            if (rel == 1) {
                                bodydiv.removeChild(mes);
                                rel = 0;
                            }

                        }
                    } else {
                        alert( body.msg);
                        location.assign('blog_login.html');
                    }


                }
            });
        }

        let getLogin = function () {
            // 获取 个人信息
            $.ajax({
                type: 'get',
                url: '/user/showuser',
                success: function (body) {
                    // 状态码为200 且有数据 即获取到了个人信息
                    if (body != null && body.code == 200 && body.data != null) {
                        let profile=document.querySelector('.card img');
                        profile.src=body.data.photo;
                        let username = document.querySelector('.card h3');
                        username.innerHTML = body.data.username;
                        let count = document.querySelector('.counter .count');
                        count.innerHTML = body.data.blogCount;
                        let likecount = document.querySelector('.likecount');
                        likecount.innerHTML = body.data.liked;
                    } else {
                        alert("操作异常:" + body.msg);
                        location.assign('blog_login.html');
                    }
                }
            });

        };
        getLogin();
        getBlogs();

        let password=document.querySelector('.password');
        password.onclick=function (){
            location.assign('modify_message.html');
        }

        let img=document.querySelector('.img');
        img.onclick=function (){
            location.assign('modify_profile.html');
        }

        function logout() {
            if (confirm("您确定要退出登录嘛?")) {
                $.ajax({
                    url: "/user/logout",
                    type: "post",
                    data: {},
                    success: function (rel) {
                        if (rel.code == 200) {
                            alert("Bye~");
                            location.assign("blog_login.html");
                        }
                    }
                });
            }
        }
    </script>
</div>
</body>
</html>